<template>
  <div id="ptchart" class="pollutionChart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    brook: {
      type: Array,
    },
  },
  // 质量图表
  methods: {
    // 排污口
    pollution() {
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose(); //解决echarts dom已经加载的报错
      }
      this.myChart = echarts.init(document.getElementById("ptchart"));

      let option = {
        color: ["#0eae54", "#2356b2", "#ac9918", "#94159a"],
        tooltip: {
          transitionDuration: 0,
          show: true,
          trigger: "item",
          formatter: "{b} {c}(个) {d}%",
        },
        legend: {
            orient: 'vertical',
        // x:'right',      //可设定图例在左、右、居中
        // y:'center',     //可设定图例在上、下、居中
        // padding:[0,50,0,0],
          itemWidth: 10,
          itemHeight: 10,
           orient: "horizontal",
          textStyle: {
            //图例文字的样式
            fontSize: 10,
          },
          data: [
            {
              name: "鹿溪河",

              textStyle: {
                color: "#548e98", // 图例文字颜色
              },
            },

            {
              name: "府河",

              textStyle: {
                color: "#548e98", // 图例文字颜色
              },
            },
            {
              name: "东风渠",

              textStyle: {
                color: "#548e98", // 图例文字颜色
              },
            },
            {
              name: "兴隆湖",

              textStyle: {
                color: "#548e98", // 图例文字颜色
              },
            },
          ],
        },

        series: [
          {
            type: "pie",
            radius: ["20%", "86%"],
            center: ["50%", "55%"],
            avoidLabelOverlap: false,
            // itemStyle:{
            //    normal: {
            //     label: {
            //       show: true,
            //       position: 'top',
            //       color:'white'
            //     },
            //   },
            // },
            label: {
              //饼图图形上的文本标签
              normal: {
                show: true,
                position: "inner", //标签的位置
                textStyle: {
                  fontWeight: 300,
                  color:'white',
                  fontSize: 10, //文字的字体大小
                },
                formatter: "{d}%",
              },
            },

            labelLine: {
              show: false,
            },
            data: this.brook,
          },
        ],
      };

      this.myChart.setOption(option);
    },

    // 窗口大小改变
    handleResize() {
      this.myChart.resize(); // 只要窗口大小改变 echarts跟着容器变化
    },
  },
  mounted() {
    // 监听窗口大小改变
    window.addEventListener("resize", this.handleResize);

    this.pollution();
  },
  watch: {
    brook: {
      
      deep: true, // 开启深度监听
      
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.pollution(); // 重新绘制
      },
    },
  },
  created(){
    this.brook = this.brook.filter(item=>{item.value !== 0})
  },
  // 销毁前
  beforeDestroy() {
    // 解绑事件 [性能优化]
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="less" scoped>
.pollutionChart {
  margin-top: 0.25rem;
  height: 2.8rem;
}
</style>